<template>
  <div class="category">
    <ul class="left">
      <li
       v-for="category in categories"
      :key="category.id"
      is="router-link"
      :to="'/category/sub/' + category.id"
      tag="li"
      >{{ category.name }}</li>
    </ul>
    <div class="right"></div>
      <router-view />
  </div>
</template>

<script>
import { getAllCategories } from '@/api/category'
export default {
  name: 'Category',
  data () {
    return {
      categories: []
    }
  },
  created () {
    getAllCategories()
      .then(res => {
        console.log(res)
        //  将api接口中返回的分类数据保存到categories 数组中
        this.categories = res
        //  编程式导航，默认向第一个分类下的子分类页面跳转
        this.$router.push('/category/sub/2').catch(() => {})
      })
  }
}

</script>

<style lang="scss" scoped>
  .category {
    display: flex;
    height: 100%;
    .left{
      width: 20%;
      height: 100%;
      background: #ccc;
      li{
        height:35px ;
        line-height: 35px;
      }
    }
    .right{
      overflow: auto;
      flex: 1;
    }
    .router-link-exact-active.router-link-active{
        color: #666;
        background: #fff;
      }
  }
</style>
